<template>
  <div class="estate" v-loading="loading">
    <div class="plot">
      <div class="plot-item" v-for="(pItem, pKey) in cardData" :key="pKey">
        <div class="locaiton">
          <i class="icon el-icon-location"></i>
          <span class="name"> {{ pItem.estateName }}-</span
          ><span class="address"
            >（广州市-天河区-石牌街道）</span
          >
        </div>
        <div
          class="buildings"
          v-for="(bItem, bKey) in pItem.children"
          :key="bKey"
        >
          <div class="unit" v-for="(uItem, uKey) in bItem.children" :key="uKey">
            <div class="info">
              {{ bItem.buildingName }}栋{{ uItem.unitName }}单元（共{{
                uItem.floors
              }}层，{{ uItem.houseNumber }}间） <span>空置率：</span
              >{{ (bItem.vacancyRate * 100).toFixed(2) }}%
            </div>
            <div class="floor-btn">
              <div
                class="btn-item"
                :class="{ active: uItem.selected == '' }"
                @click="filterFloor('', uItem)"
              >
                所有
              </div>
              <div
                class="btn-item"
                :class="{ active: uItem.selected == fKey }"
                v-for="(fItem, fKey) in uItem.children"
                :key="fKey"
                @click="filterFloor(fKey, uItem)"
              >
                {{ fKey }}
              </div>
            </div>
            <div
              class="building"
              v-for="(fItem, fKey) in roomByFloor(
                uItem.children,
                uItem.selected
              )"
              :key="fKey"
            >
              <div class="floor">
                <span>{{ fKey }}层</span>（{{ fItem.length }}间）
              </div>
              <div class="house">
                <div
                  class="room normal"
                  @click="showHouse"
                  v-for="(rItem, rKey) in fItem"
                  :key="rKey"
                >
                  <div class="name">
                    <div class="flex">
                      <span>{{ rItem.roomNumber }}号</span>
                      <div class="flex" v-if="rItem.houseType">
                        (<dict-tag
                          :options="dict.type.dict_house_type"
                          :value="rItem.houseType"
                        />)
                      </div>
                    </div>
                    <i class="el-icon-female" style="color: pink"></i>
                    <!-- <i class="el-icon-male" style="color: skyblue"></i> -->
                  </div>
                  <div class="price"><span>¥ 780</span>/月(押一付一)</div>
                  <div class="person">
                    <div class="person-info">张小姐 13233445512</div>
                    <div class="time-range">2023-09-23-2023-12-23</div>
                  </div>
                  <div class="status">
                    <i class="icon iconfont icon-lock"></i>
                    <div class="tags">
                      <span>换</span>
                      <span>续</span>
                      <span>租</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="plot-item" v-if="!cardData.length">
        <el-empty :image-size="100"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { queryFindHouseInfoList } from "@/api/house/condition";
export default {
  props: {
    queryParams: {
      default: {},
    },
  },
  dicts: ["dict_online_rental_type", "dict_house_type", "dict_estate_type"],
  data() {
    return {
      loading: false,
      houseInfoList: [],
      cardData: [],
    };
  },
  computed: {
    //根据楼层显示房间
    roomByFloor() {
      return (uItem, fKey = "") => {
        if (fKey) {
          let res = {};
          res[fKey] = uItem[fKey];
          return res;
        } else {
          return uItem;
        }
      };
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
      //   (response) => {
      //     this.houseList = response.rows;
      //     this.total = response.total;
      //     this.loading = false;
      //   }
      // );
      this.loading = true;
      queryFindHouseInfoList(this.queryParams)
        .then((res) => {
          // console.log("res", res);
          this.houseInfoList = res.data;
          let cardData = this.handleCardData(res.data);
          this.cardData = cardData;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    showHouse() {
      console.log("show");
      this.$emit("showHouse", "aa");
    },
    //筛选楼层
    filterFloor(fKey, uItem) {
      uItem.selected = fKey;
    },
    housekeyToObj(key) {
      // console.log('111111111111',key.split("(")[1].split(")")[0].replace(/[\t\r\f\n\s]*/g, ""));return
      let str = key
        .split("(")[1]
        .split(")")[0]
        .replace(/[\t\r\f\n\s]*/g, "");
      let arr = str.split(",");
      let obj = {};
      for (let i = 0; i < arr.length; i++) {
        const e = arr[i].split("=");
        obj[e[0]] = e[1];
      }
      return obj;
    },
    handleCardData(obj, n = 0) {
      let resultArr = [];
      for (const key in obj) {
        // console.log('key++++++++++++++',key);
        let a = {};
        if (Object.hasOwnProperty.call(obj, key)) {
          // console.log('key', key, n);
          let okey = this.housekeyToObj(key);
          a = { ...okey, level: n + 1, selected: "" };
          if (n < 2) {
            a["children"] = this.handleCardData(obj[key], n + 1);
          } else {
            // console.log('最终',n,obj[key]);
            a["children"] = obj[key];
            // console.log(n,obj[key]);
          }

          resultArr.push(a);
        }
      }
      return resultArr;
    },
  },
};
</script>

<style lang="scss" scoped>
.plot {
  .plot-item {
    .locaiton {
      margin: 20px 0;

      .icon {
        font-size: 20px;
        color: #1093d6;
      }

      .name {
        font-weight: 600;
      }

      .address {
        color: #000;
      }
    }

    .unit {
      margin-bottom: 40px;

      .info {
        padding: 5px 10px;
        background: #f2f2f2;
        font-size: 14px;
        margin: 10px 0;

        span {
          font-weight: 600;
        }
      }

      .floor-btn {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .btn-item {
          width: 30px;
          height: 20px;
          padding: 2px 5px;
          border-radius: 5px;
          font-size: 12px;
          text-align: center;
          line-height: 20px;
          box-sizing: content-box;
          margin-right: 5px;
          border: 1px solid #d9d9d9;
          background: #fff;
          cursor: pointer;

          &.active {
            background: #3889f8;
            color: #fff;
            cursor: default;
          }
        }
      }

      .building {
        .floor {
          span {
            font-weight: 600;
          }
        }

        .house {
          display: flex;
          flex-wrap: wrap;

          .room {
            width: 23%;
            min-height: 140px;
            padding: 5px 10px;
            margin: 5px 5px;
            border: 1px solid #d7d7d7;
            transition: all 0.3s;

            &:hover {
              box-shadow: 0px 0px 4px #999999;
              cursor: pointer;
            }

            &.normal {
              border-left: 4px solid #00d07f;
            }

            &.warning {
              border-left: 4px solid #ac0019;
            }

            .name {
              display: flex;
              justify-content: space-between;
              margin: 5px 0;

              span {
                font-weight: 600;
              }
            }

            .price {
              color: #4ea1f9;

              span {
                font-weight: 600;
              }
            }

            .person {
              margin: 5px 0;
              min-height: 40px;
              color: #aaaaaa;

              .person-info {
                font-size: 14px;
              }

              .time-range {
                font-size: 14px;
              }
            }

            .status {
              display: flex;
              justify-content: space-between;

              .icon {
                color: #c1c1c1;
              }

              .tags {
                display: flex;

                span {
                  width: 20px;
                  height: 20px;
                  text-align: center;
                  line-height: 20px;
                  font-size: 12px;
                  border: 1px solid #1093d6;
                  border-radius: 50%;
                  color: #1093d6;
                  background: #fff;

                  &:not(:first-child) {
                    // 只需要加这行代码就能搞定
                    margin-left: -4px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>